<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团建活动组织管理系统</title>
    <!-- 引入bootstrap.css -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        #app{
            border: 1px solid red; 
        }
        h1{
            text-align: center;
        }
        .tt{
            display: flex;
            justify-content:space-between;
        }
        .cursor-pointer {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h1>{{msg}}</h1>
        <div class="tt">
            <div>
                <button class="btn btn-primary">添加人员</button>
            </div>
            <div>
                <input type="text" placeholder="小组名称" v-model="searchName">
                <button class="btn btn-primary" @click="searchList">查询</button>
            </div>
        </div>
        <!-- 展示路由组件出口 -->
        <router-view></router-view>
        
    </div>
    <!--小组列表组件 -->
    <template id="ss">
        <div class="table-responsive">
            <table class="table table-hover">
               <thead>
                    <tr>
                    <th scope="col">编号</th>
                    <th scope="col">小组名称</th>
                    <th scope="col">成员数量</th>
                    <th scope="col">积分</th>
                    <th scope="col">口号</th>
                    </tr>
                </thead>  
                <tbody>
                    <template v-for="(squad, index) in squadList">
                        <tr class="cursor-pointer" @click="toggleRow(index)">
                            <th scope="row">{{ squad.squadId }}</th>
                            <td>{{ squad.squadName }}</td>
                            <td>{{ squad.num }}</td>
                            <td>{{ squad.integral }}</td>
                            <td>{{ squad.slogan }}</td>
                        </tr>
                        <tr v-if="squad.expanded">
                            <td colspan="5">
                                <div class="card card-body">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">人员编号</th>
                                                <th scope="col">昵称</th>
                                                <th scope="col">性别</th>
                                                <th scope="col">年龄</th>
                                                <th scope="col">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(user, userIndex) in squad.users" :key="user.ld">
                                                <th scope="row">{{user.ld}}</th>
                                                <td>{{ user.nickName }}</td>
                                                <td>{{ user.gender }}</td>
                                                <td>{{ user.age }}</td>
                                                <td><button type="button" class="btn btn-danger">删除</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>
</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    // 创建事件总线
    const EventBus = new Vue();
     
     // 创建实例时设置配置的默认值
    const http = axios.create({
        baseURL: "http://127.0.0.1:25080",
        timeout: 3000,
    });
    //创建小组组件
    const squad = {
        template: '#ss',
        data() {
            return {
                squadList: [],
                searchName:''
            }
        },
        methods: {
            //获取小组列表
            getSquadList(){
                http.get('/squad/list',{
                    params:{
                        squadName:this.searchName
                    }
                }).then(res => {
                    console.log(res.data.data);
                    // 为每个小组添加 expanded 属性
                    // this.squadList = res.data.data.map(item => {
                    //     return {
                    //         ...item,
                    //         expanded: false,
                    //         users: item.users || []  // 确保 users 字段存在
                    //     };
                    // });
                    this.squadList = res.data.data;
                }).catch(error => {
                    console.error('获取小组列表失败:', error);
                    // 在失败时清空列表或显示错误信息
                    this.squadList = [];
                })
            },
            //展开行
            toggleRow(index) {
                // 实现手风琴效果，关闭其他行
                this.squadList.forEach((item, i) => {
                    if (i !== index) {
                        item.expanded = false;
                    }
                });
                // 切换当前行的展开状态
                this.squadList[index].expanded = !this.squadList[index].expanded;
            }
        },
        //钩子函数 初始化完毕后 执行
        created() {
            console.log('初始化完毕');
            this.getSquadList();
            // 监听事件总线上的搜索事件
            EventBus.$on('search-squad', (searchName) => {
                this.searchName = searchName;
                this.getSquadList();
            });
        },
        beforeDestroy() {
            // 组件销毁前移除事件监听
            EventBus.$off('search-squad');
        }
    }
    //创建路由规则
    var routes = [
        { path: '/', component: squad }
    ];
   // 创建路由实例
   var router = new VueRouter({
    routes
  });
    var app = new Vue({
        el: '#app',
        data: {
            msg:'团建活动组织管理系统',
            squadList: [],
            searchName:''
        },
        methods: {
            searchList(){
                // 通过事件总线的方式通知子组件更新数据
                EventBus.$emit('search-squad', this.searchName);
            },
            
        },
        router,
        
    })
</script>